@import '../../styles/vars';

.@{prefix}-clip {
  position: relative;
  display: flex;
  height: calc(100% - 32px);

  &-main,
  &-preview {
    width: 50%;
    height: 100%;
    border: 1px @borderColor solid;
  }

  &-main {
    margin-right: 1em;

    .@{prefix}-clip-cropper {
      position: relative;
      width: 100%;
      height: 100%;

      .@{prefix}-clip-delete {
        position: absolute;
        top: 0;
        right: 0;
        // 幽灵空白
        font-size: 0;
        background-color: @bbkColor;
        border-bottom-left-radius: 4px;
        color: @color;
        cursor: pointer;
      }
    }

    .@{prefix}-clip-upload {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      cursor: pointer;

      .@{prefix}-icon {
        width: auto;
        height: 40px;
      }
    }
  }

  &-preview {
    &-target {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}

.@{prefix}-dark {
  .@{prefix}-clip {
    &-main,
    &-preview {
      border: 1px @borderColorDark solid;
    }

    &-main {
      margin-right: 1em;

      .@{prefix}-clip-cropper {
        .@{prefix}-clip-delete {
          background-color: @bbkColorDark;
          color: @colorDark;
        }
      }
    }
  }
}
